<script lang="ts" setup>
import { getAllFavoriteDevicesApi } from '@/services/my'
import { useDeviceStore, useMemberStore, useLocationStore } from '@/stores'
import { PageSkip } from '@/utils/tools'
import { onLoad, onUnload } from '@dcloudio/uni-app'
import { ref, reactive } from 'vue'

const deviceStore = useDeviceStore()
const memberStore = useMemberStore()
const locationStore = useLocationStore()

onLoad(() => {
  uni.getLocation({
    type: 'gcj02',
    accuracy: 'best',
    success: (success: UniApp.GetLocationSuccess) => {
      locationStore.setLocation({
        latitude: success.latitude + '',
        longitude: success.longitude + '',
      })
      getAllFavoriteDevices()
    },
  })
})
let list = ref([])
/**
 * @param  getAllFavoriteDevices 获取设备列表信息接口
 */
const getAllFavoriteDevices = async () => {
  const res: any = await getAllFavoriteDevicesApi({
    clientId: memberStore.userInfo!.id,
    longitude: locationStore.location!.longitude,
    latitude: locationStore.location!.latitude,
  })
  // console.log(res)
  list.value = res.data
}

/**  选中设备 */
const myClick = (e: any) => {
  deviceStore.setDeviceInfo(e)
  PageSkip('/pages/eat/eat', 'switchTab')
}

/**设置轮询 */
const polling = setInterval(() => {
  getAllFavoriteDevices()
}, 3000)
onUnload(() => {
  clearInterval(polling)
})
</script>

<template>
  <view class="allDevices" v-if="list.length">
    <BjsSpotItem :list="list!" :flag="true" @myClick="myClick" />
  </view>
  <view class="dontDevices" v-else>
    <image src="/static/images/dontDevices.png" mode="scaleToFill" />
  </view>
</template>

<style lang="scss">
.allDevices,
.dontDevices {
  width: 100%;
  min-height: 100vh;
  padding: 24rpx;
  background: #f5f5f5;
}
.allDevices {
  padding-bottom: 80rpx;
}
.dontDevices {
  display: flex;
  justify-content: center;
  align-items: center;
  & image {
    width: 376rpx;
    height: 334rpx;
  }
}
</style>
